<template>
	<view class="content">
		<view class="header-box">
			<view class="pageTitle">
				我的
			</view>
		</view>
		
		<view class="user-info">
			<view class="top-box">
				<image :src="memberInfo.headimg ? memberInfo.headimg : '../../static/images/tabbar/item5.png' "></image>
				<view class="user-desc">
					<view class="name">{{memberInfo.username}}<view class="grade">{{memberInfo.member_level_name}}</view></view>
					<view class="user-btn">
						<view class="id">ID:{{memberInfo.member_id}}</view>
						<view class="id">邀请码：{{memberInfo.invite_code}}</view>
					</view>
				</view>
				
			</view>
			<view class="arr">
				 <view class="item" v-for="(item,index) in amountArr" @click="goPage(item.path)" :key="index">
				 	<text>{{item.val}}</text>
				 	<view>{{item.label}}</view>
				 </view>
			</view>
			
		</view>
		
		<view class="my-team-box" style="margin-bottom: 20rpx;">
			<view class="tips-box">
				<view class="tips-name">我的订单</view>
				<view class="tips-loding" @click="junit('/pages/prefile/order/order', {type: 'all'})">
					<text>查看全部</text>
					<image style="width: 11upx; height: 21upx; margin-left: 15upx;" src="../../static/images/index/loding.png"></image>
					
				</view>
			</view>
			<view class="team-item-line">
				<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 'waitpay'})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem1.png"></image>
					<view>待付款</view>
					<u-badge type="error"  :count="orderCountObj.waitpay" style="position: absolute; right: 40upx; top: -10upx;"></u-badge>
				</view>
				<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 'waitsend'})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem2.png"></image>
					<view>待发货</view>
					<u-badge type="error" :count="orderCountObj.waitsend" style="position: absolute; right: 40upx; top: -10upx;"></u-badge>
				</view>
				<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 'waitconfirm'})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem3.png"></image>
					<view>待收货</view>
					<u-badge type="error"  :count="orderCountObj.waitconfirm" style="position: absolute; right: 40upx; top: -10upx;"></u-badge>
				</view>
				<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 'waitrate'})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem4.png"></image>
					<view>已完成</view>
					<u-badge type="error"  :count="orderCountObj.waitrate" style="position: absolute; right: 40upx; top: -10upx;"></u-badge>
				</view>
			</view>
		</view>
		
		<view class="my-team-box">
			<view class="tips-box">
				<view class="tips-name">我的盲盒</view>
				<view class="tips-loding" @click="junit('/pages/theBestBox/joinRecord', {type: -1})">
					<text>查看全部</text>
					<image style="width: 11upx; height: 21upx; margin-left: 15upx;" src="../../static/images/index/loding.png"></image>
					
				</view>
			</view>
			<view class="team-item-line">
				<view class="team-item" @click="junit('/pages/theBestBox/joinRecord' , {type: 0})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/collageItem1.png"></image>
					<view>拆盒中</view>
					<u-badge type="error" :count="theBestBoxCountObj.wait" style="width:40rpx; height: 40rpx;border-radius: 50%;position: absolute; right: 45upx; top: -15upx;"></u-badge>
				</view>
				<view class="team-item" @click="junit('/pages/theBestBox/joinRecord' , {type: 1})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/collageItem2.png"></image>
					<view>已拆中</view>
					<u-badge type="error" :count="theBestBoxCountObj.win" style="width:40rpx; height: 40rpx;border-radius: 50%;position: absolute; right: 45upx; top: -15upx;"></u-badge>
				</view>
				<view class="team-item" @click="junit('/pages/theBestBox/joinRecord' , {type: 2})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/collageItem3.png"></image>
					<view>未拆中</view>
					<u-badge type="error"  :count="theBestBoxCountObj.end" style="width:40rpx; height: 40rpx;border-radius: 50%;position: absolute; right: 45upx; top: -15upx;"></u-badge>
				</view>
				<view class="team-item" @click="junit('/pages/theBestBox/joinRecord' , {type: 3})">
					<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/collageItem4.png"></image>
					<view>失败</view>
					<u-badge type="error" :count="theBestBoxCountObj.lose" style="width:40rpx; height: 40rpx;border-radius: 50%;right: 45upx; top: -15upx;"></u-badge>
				</view>
			</view>
		</view>
	
		<view class="utilBox">
			<text>推荐工具</text>
			<view class="gonneng-box">
				<view class="gonneng-item" @click="junit('/pages/prefile/my-prize/my-prize')">
					<image src="../../static/images/prefile/jianping.png" style="width: 45upx; height: 45upx;"></image>
					<view>我的奖品</view>
				</view>
				<view class="gonneng-item" @click="goPage('/pages/prefile/shareImg/shareImg')">
					<image src="../../static/images/prefile/QRcode.png" style="width: 45upx; height: 45upx;"></image>
					<view>推广海报</view>
				</view>
				<view class="gonneng-item" @click="junit('/pages/prefile/promoteCenter/promoteCenter')">
					<image src="../../static/images/prefile/horn.png" style="width: 45upx; height: 45upx;"></image>
					<view>推广中心</view>
				</view>
				<view class="gonneng-item" @click="junit('/pages/prefile/my-extension/my-team/my-team')">
					<image src="../../static/images/prefile/myTeam.png" style="width: 45upx; height: 45upx;"></image>
					<view>我的团队</view>
				</view>
				<view class="gonneng-item" @click="junit('/pages/prefile/myData/myData')">
					<image src="../../static/images/prefile/data.png" style="width: 45upx; height: 45upx;"></image>
					<view>我的数据</view>
				</view>
			<!-- 	<view v-if="userInfo.islevel" class="gonneng-item" @click="junit('/pages/prefile/group-leader/group-leader')">
					<image src="../../static/images/prefile/teamCenter.png" style="width: 45upx; height: 45upx;"></image>
					<view>团主中心</view>
				</view> -->
			<!-- 	<view class="gonneng-item"  @click="junit('/pages/prefile/coupons/coupons')" >
					<image src="../../static/images/prefile/coupon.png" style="width: 45upx; height: 45upx;"></image>
					<view>优惠券</view>
				</view> -->
				<view class="gonneng-item" @click="junit('/pages/prefile/address/list')">
					<image src="../../static/images/prefile/address.png" style="width: 45upx; height: 45upx;"></image>
					<view>地址管理</view>
				</view>
				<!-- <view v-if="isconfig == 1" class="gonneng-item" @click="junit('/pages/prefile/bank-list/bank-list')"> -->
				<view  class="gonneng-item" @click="junit('/pages/prefile/setting/setting')">
					<image src="../../static/images/prefile/setting.png" style="width: 45upx; height: 45upx;"></image>
					<view>设置</view>
				</view>
				<view  class="gonneng-item" @click="logout()">
					<image src="../../static/images/prefile/logout.png" style="width: 45upx; height: 45upx;"></image>
					<view>退出登录</view>
				</view>
				
			</view>
		</view>
		
		<view class="bottomText" style="color: #C9C9C9; font-size: 24upx;text-align: center; margin-top: 188upx;padding-bottom: 30rpx;">臻品盒子</view>
		
		<u-mask :show="share" @click="share = false">
				<view class="warp">
					<view class="rect" @tap.stop @longpress="saveImg(shareIma)">
						<image :src="shareIma"  style="width: 600upx; height: 900upx;"></image>
					</view>
				</view>
		</u-mask>
			
			
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				orderStaus: {},
				share: false,
				shareIma: "",
				isconfig: 0,
				amountArr:[
					{
						val:'',
						label:'我的余额',
						path:'/pages/prefile/my-balance/my-balance'
					},{
						val:'',
						label:'我的积分',
						path: '/pages/prefile/jiFen/jiFen',
					},{
						val:'',
						label:'我的优惠券',
						path: '/pages/prefile/coupons/coupons',
					},
				],
				memberInfo:{},
				orderCountObj: {},
				theBestBoxCountObj: {},
			};
		},
		computed:{
			// ...mapState(['userInfo'])
		},
		onLoad() {
			
			
		},
		onShow() {
			this.getMemberInfo();
			this.orderCount();
			this.theBestBoxCount();
		},
		methods:{
			// ...mapActions(['getUserPrefile']),
			logout(){
				uni.removeStorageSync('token')
				uni.removeStorageSync('mid')
				this.goPage('/pages/login/login')
			},
			getMemberInfo(){
				this.myHttp({
					url:'/api/member/userInfo',
				}).then((res)=>{
					this.memberInfo = res.data
					this.amountArr[0].val = res.data.balance//余额
					this.amountArr[1].val = res.data.point//积分
					this.amountArr[2].val = res.data.coupon //优惠券
				})
			},
			orderCount(){
				this.myHttp({
					url:'/api/order/numbers',
				}).then((res)=>{
					this.orderCountObj = res.data
				})
			},
			theBestBoxCount(){
				this.myHttp({
					url:'/surpriseblindbox/api/Blindbox/getStatusNumber',
				}).then((res)=>{
					this.theBestBoxCountObj = res.data
				})
			},
			showShare(){
				this.myHttp({
					url:'/fenxiao/api/fenxiao/poster',
				}).then((res)=>{
					this.shareIma = res.data.path;
					this.share= true;
				
				})
			},
			
		}
	}
</script>

<style  lang="scss" scoped>
	
	
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 600upx;
		height: 900upx;
		background-color: #F8F8F8;
	}
	
	.bottomText{
		position: relative;
		&:before{
			content: '';
			position: absolute;
			top: 22%;
			right: 39%;
			height: 3.5rpx;
			width: 30rpx;
			background-color: #C9C9C9;
		}
		&:after{
			content: '';
			position: absolute;
			top: 22%;
			left: 39%;
			height: 3.5rpx;
			width: 30rpx;
			background-color: #C9C9C9;
		}
		
	}
	.arr{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-around;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			color: #000;
			width: 25%;
			text{
				margin-bottom: 20rpx;
				font-size: 30rpx;
			}
			view{
				font-size: 24rpx;
			}
		}
	}
	
	.content{
		background-color: #F8F8F8;
		.header-box{
			background: $themeColor;
			height: 348upx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			// border-radius: 0 0 30% 30%;
			display: flex;
			justify-content: center;
			padding-top: 81rpx;
			.pageTitle{
				font-size: 31rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				
			}
		
			
		}
		
		.user-info{
			margin: -200rpx 25rpx 19rpx;
			padding: 16upx 18upx;
			background-color: #fff;
			border-radius: 10rpx;
			height: 288rpx;
			.top-box{
				display: flex;
				margin-bottom: 40rpx;
				image{
					width: 107upx;
					height: 108upx;
					border-radius: 50%;
				}
				.user-desc{
					font-size: 33upx;
					margin-left: 28upx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					.name{
						font-weight: bold;
						display: flex;
						align-items: center;
						.grade{
							padding: 6rpx 12rpx;
							background: #000000;
							color: #CFA972;
							font-size: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 16rpx;
							margin-left: 13rpx;
						}
					}
					.user-btn{
						display: flex;
						.id{
							width: auto;
							padding: 5rpx 20rpx;
							display: grid;
							place-items: center;
							background: #FCF1E0;
							color: #CFA972;
							border-radius: 15rpx;
							font-size: 24rpx;
							&:nth-child(2){
								margin-left: 16rpx;
							}
						}
					}
					
				}
			}
			
		}
		
		.my-team-box{
				width: 700upx;
				background: #FFFFFF;
				box-shadow: 0upx 3upx 68upx 0upx rgba(239, 239, 239, 0.95);
				border-radius: 10upx;
				margin: 0 auto;
				padding: 25upx 0;
				.tips-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #eee;
					padding: 0 25rpx 15rpx;
					.tips-name{
						font-size: 28upx;
						color: #000000;
						font-weight: 666;
					}
					.tips-loding{
						font-size: 26upx;
						color: #C0C0C0;
					}
				}
				.team-item-line{
					margin-top: 33upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					.team-item{
						width: 25%;
						font-size: 22upx;
						position: relative;
						padding-bottom: 20rpx;
					}
				}
		}
		
		.utilBox{
			width: 700upx;
			height: 371rpx;
			background: #FFFFFF;
			box-shadow: 0px 3upx 68upx 0upx rgba(239, 239, 239, 0.95);
			margin: 20rpx auto;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 26rpx;
			}
			.gonneng-box{
				width: 700upx;
				height: 304upx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.gonneng-item{
					width: 25%;
					text-align: center;
				}
			}
		}
		
	}
</style>